<template>
	<view>
		<uni-nav-bar @clickLeft='onClickLeft' @clickRight='onClickRight' left-icon="arrowleft" right-text="发布" :statusBar='true'>
			<view class="header_text" @tap="headerContent">
				<view class="text">
					{{headerText}}
				</view>
				<view class="iconfont iconxianshigengduo" style="font-weight: 700;"></view>
			</view>
		</uni-nav-bar>
		<!-- 多行输入框 -->
		<view class="uni-textarea">
			<textarea v-model="text" placeholder="说一句话吧" />
		</view>
		<!-- 点击上传图片 -->
		<img-upload @upload='Upload'></img-upload>
		<!-- 弹出层 -->
		<uni-popup ref="showpopup" type="center" @change="change">
			<view class="Notice">
				<view class="Notice_img">
					<image src="/static/demo/NoticeTipe.png" mode="widthFix"></image>
				</view>
				
				<view class="Notice_list">
					<view class="Notice_item">1、涉及黄色，政治，广告骚扰信息</view>
					<view class="Notice_item">2、涉及人身攻击</view>
					<view class="Notice_item">3、留联系方式，透露他人隐私</view>
					<view class="Notice_item">一经核实将被封禁，情节严重者永久封禁</view>
				</view>
				<button type="primary" class="Notice_button" @click="NoticeClone">
					朕知道了
				</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import imgUpload from '@/components/Img-upload.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				headerText: '所有人可见',
				text:'',
				// 图片上传
				imglist:[],
				// 弹出层
				content: '顶部弹 popup',
				exit:false
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.$refs['showpopup'].open()
			})
			
		},
		onBackPress() {
			// 监听页面返回页面 如果return true 阻止页面返回
			if(!this.exit && (this.imglist.length>0 || this.text)){
				this.preserved()
				return true
			}
			
		},
		methods: {
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			onClickRight() {
				console.log('右边点击事件')
			},
			headerContent() {
				let arr = ['所有人可见', '仅自己可见'];
				uni.showActionSheet({
					itemList: arr,
					success: res => {
						this.headerText = arr[res.tapIndex]
					}
				});
			},
			Upload(data){
				this.imglist=data
			},
			change(e) {
				console.log('是否打开:' + e.show)
			},
			NoticeClone(){
				this.$nextTick(() => {
					this.$refs['showpopup'].close()
				})
			},
			preserved(){
				// 保存草稿
				uni.showModal({
				    title: '提示',
				    content: '是否保存草稿',
					cancelText:'不保存',
					confirmText:'保存',
				    success: res=> {
				        if (res.confirm) {
							this.exit = true
				            console.log('保存');
				        } else if (res.cancel) {
							this.exit = true
				            console.log('不保存');
				        }
						uni.navigateBack({
							delta: 1
						})					
				    }
				});
			}
		},
		components: {
			uniNavBar,
			imgUpload,
			uniPopup
		}
	}
</script>

<style scoped>
	.header_text {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.uni-textarea{
		width: 100%;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		padding: 10rpx;
		box-sizing: border-box;
	}
	.uni-textarea textarea{
		width: 100%;
	}
	.Notice{
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx 0;
	}
	.Notice .Notice_img{
		display: flex;
		padding-bottom: 30rpx;
		justify-content: center;
		align-items: center;
	}
	.Notice .Notice_img image{
		width: 50%;
	}
	.Notice .Notice_list{
		font-size: 30rpx;
		line-height: 50rpx;
		padding: 30rpx;
	}
	.Notice .Notice_button{
		margin:0 30rpx;
		background: #ffe934;
		color: #000;
		transition: all .2s; 
	}
	.Notice .Notice_button.button-hover{
		background: #e0cd32;
	}
</style>
